<template >
	<div class="content">
		<div class="content-header">专业管理</div>
		<div class="content-table"
		>
			<el-form inline size="mini">
				<el-form-item >
					<el-input  placeholder="专业名称" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="getList">查 询</el-button>
					<el-button icon="el-icon-refresh" @click="resetList">重 置</el-button>
					<el-button type="primary" icon="el-icon-plus" @click="addDialog = true">新 建</el-button>
				</el-form-item>
			</el-form>
			<el-table
					:data="tableData"
					stripe
					style="width: 100%">
				<el-table-column
						prop="number"
						label="自增编号"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="name"
						label="专业名称"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="className"
						label="当前开设班级"
						align="center"
				>
				</el-table-column>
				<el-table-column
						label="操作"
						align="center"
				>
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="openEdit(scope.row)">编 辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.id)">删 除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-footer">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					background
					:page-size="10"
					small
					layout="total, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		
<!--新增专业-->
		<el-dialog title="新增专业" :visible.sync="addDialog" width="25%">
			<el-form label-width="90px" size="small" :model="addForm" :rules="rules" ref="addForm">
				<el-form-item label="专业名称:" prop="name">
					<el-input v-model="addForm.name" placeholder="请输入专业名称"></el-input>
				</el-form-item>
				<el-form-item label="班级:">
					<el-select v-model="addForm.classIds" multiple placeholder="请选择班级" style="width: 100%">
						<el-option
								v-for="item in classList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submit('addForm')" size="small">确 定</el-button>
			</div>
		</el-dialog>
<!--编辑专业-->
		<el-dialog title="编辑专业" :visible.sync="editDialog" width="25%">
			<el-form label-width="90px" size="small" :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="专业名称:" prop="name">
					<el-input v-model="editForm.name" placeholder="请输入专业名称"></el-input>
				</el-form-item>
				<el-form-item label="班级:" >
					<el-select v-model="editForm.classIds" multiple placeholder="请选择班级" style="width: 100%">
						<el-option
								v-for="item in classList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submitEdit('editForm')" size="small">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template >

<script >
	import { classPage } from "../api/class";
	import {addSpeciality,specialityList,delSpeciality,editSpeciality} from "../api/speciality";
    export default {
        data(){
            return{
                form:{
                    name: "",
                    pageIndex: 1,
                    pageSize: 10
				},
                tableData:[],
				total:null,
				classList:[],
				addDialog:false,
				addForm:{
                    classIds:[],
                    name:''
				},
                rules: {
                    name: [
                        {required: true, message: '请输入专业名称', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ]
                },
				editDialog:false,
				editForm:{}
            }
        },
		mounted() {
            this.getClassList()
			this.getList()
        },
        methods: {
            //获取班级数据
			async getClassList(){
			    const { data } = await classPage()
				if (data.code === 200){
				    this.classList = data.data
				}
			},
			//提交新增
            submit(addForm){
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
						addSpeciality(this.addForm).then(res => {
                            console.log(res)
							if (res.data.code === 200){
							    this.$notify.success(res.data.message)
								this.addDialog = false
                                this.addForm = {}
								this.getList()
							}
						})
                    }
                });
			},
			//查询列表
            async getList(){
			    const { data } = await specialityList(this.form)
                console.log(data)
				if (data.code === 200){
				    this.tableData = data.data.data
					this.total = data.data.total
				}
			},
			//重置
            resetList(){
			  this.form.name = ''
				this.getList()
			},
			//删除专业
			del(id){
                this.$confirm('删除该专业, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delSpeciality(id).then(res => {
						if (res.data.code === 200){
						    this.$notify.success(res.data.message)
							this.getList()
						}
					})
                })
			},
			//编辑弹窗
            openEdit(item){
				const { id,name,classIds} = item
				this.editForm = { id,name,classIds}
				this.editDialog = true
			},
			//提交编辑
            submitEdit(editForm){
                this.$refs[editForm].validate((valid) => {
                    if (valid) {
                        editSpeciality(this.editForm).then(res => {
                            console.log(res)
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.editDialog = false
                                this.editForm = {}
                                this.getList()
                            }
                        })
                    }
                });
			},
			//分页
            handleSizeChange(val) {
                this.form.pageSize = val
				this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            }
        },
    }
</script >

<style scoped lang="less" >
	@import "../assets/style/common";
</style >
